// 时间选择器深色主题样式
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 240px;
}

// 日期范围选择器样式
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 300px;
}

// 主容器样式
.el-picker-panel {
  background: linear-gradient(135deg, #0c1b33 0%, #1a3a5f 100%);
  border: 1px solid #2d5278;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #bae7ff;

  // 头部样式
  .el-picker-panel__header {
    background: rgba(5, 64, 128, 0.3);
    border-bottom: 1px solid #2d5278;
    color: #bae7ff;

    .el-picker-panel__icon-btn {
      color: #8ac6ff;
      background: transparent;
      border: none;

      &:hover {
        color: #ffffff;
        background: rgba(24, 144, 255, 0.3);
      }
    }

    .el-picker-panel__prev-btn,
    .el-picker-panel__next-btn {
      &:hover {
        color: #ffffff;
      }
    }
  }

  // 内容区域
  .el-picker-panel__content {
    background: transparent;
  }

  // 日期表格样式
  .el-date-table {
    th {
      color: #8ac6ff;
      border-bottom: 1px solid #2d5278;
    }

    td {
      &.available {
        color: #bae7ff;

        &:hover {
          color: #ffffff;
          background: rgba(24, 144, 255, 0.3);
        }
      }

      &.today {
        span {
          color: #1890ff;
          font-weight: bold;
        }
      }

      &.current:not(.disabled) {
        span {
          background: #1890ff;
          color: #ffffff;
        }
      }

      &.start-date,
      &.end-date {
        span {
          background: #1890ff;
          color: #ffffff;
        }
      }

      &.in-range {
        background: rgba(24, 144, 255, 0.2);

        &:hover {
          background: rgba(24, 144, 255, 0.3);
        }
      }

      &.disabled {
        span {
          color: #6a7b8c;
          background: transparent;
        }
      }
    }
  }

  // 月份表格样式
  .el-month-table,
  .el-year-table {
    td {
      .cell {
        color: #bae7ff;

        &:hover {
          color: #ffffff;
          background: rgba(24, 144, 255, 0.3);
        }
      }

      &.current:not(.disabled) {
        .cell {
          color: #1890ff;
          font-weight: bold;
        }
      }

      &.disabled {
        .cell {
          color: #6a7b8c;
          background: transparent;
        }
      }
    }
  }

  // 底部按钮区域
  .el-picker-panel__footer {
    background: rgba(5, 64, 128, 0.3);
    border-top: 1px solid #2d5278;
    padding: 10px;

    .el-button {
      background: rgba(24, 144, 255, 0.3);
      border: 1px solid #1890ff;
      color: #bae7ff;
      border-radius: 4px;
      padding: 6px 12px;

      &:hover {
        background: rgba(24, 144, 255, 0.5);
        color: #ffffff;
      }

      &.el-button--text {
        background: transparent;
        border: 1px solid transparent;
        
        &:hover {
          background: rgba(24, 144, 255, 0.2);
          border-color: #1890ff;
        }
      }
    }
  }
}

// 输入框样式
.el-date-editor {
  .el-range-input {
    background: transparent;
    color: #bae7ff;
    border: none;
    font-size: 12px;

    &::placeholder {
      color: #6a7b8c;
    }
  }

  .el-range-separator {
    color: #8ac6ff;
    font-size: 12px;
  }

  .el-range__close-icon,
  .el-range__icon {
    color: #8ac6ff;

    &:hover {
      color: #ffffff;
    }
  }

  .el-input__inner {
    background: rgba(5, 64, 128, 0.3);
    border: 1px solid #2d5278;
    border-radius: 4px;
    color: #bae7ff;
    font-size: 12px;

    &:focus {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    &::placeholder {
      color: #6a7b8c;
    }
  }

  .el-input__prefix,
  .el-input__suffix {
    color: #8ac6ff;
  }

  .el-input__suffix {
    .el-input__suffix-inner {
      .el-icon-date {
        color: #8ac6ff;
        
        &:hover {
          color: #ffffff;
        }
      }
    }
  }
}

// 日期范围选择器特定样式
.el-date-editor--daterange {
  .el-range-input {
    background: transparent;
  }

  .el-range-separator {
    line-height: 24px;
  }
}

// 下拉框样式
.el-popper {
  &.el-picker__popper {
    background: linear-gradient(135deg, #0c1b33 0%, #1a3a5f 100%);
    border: 1px solid #2d5278;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    .el-popper__arrow {
      &::before {
        background: linear-gradient(135deg, #0c1b33 0%, #1a3a5f 100%);
        border: 1px solid #2d5278;
      }
    }
  }
}

// 小尺寸样式
.el-date-editor--small {
  .el-range-input {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }

  .el-range-separator {
    line-height: 22px;
    font-size: 12px;
  }

  .el-input__inner {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }
}

// 禁用状态样式
.el-date-editor.is-disabled {
  .el-range-input,
  .el-input__inner {
    background: rgba(106, 123, 140, 0.2);
    border-color: #4a5a6a;
    color: #6a7b8c;
    cursor: not-allowed;

    &::placeholder {
      color: #6a7b8c;
    }
  }

  .el-range-separator,
  .el-range__close-icon,
  .el-range__icon {
    color: #6a7b8c;
  }
}

// 错误状态样式
.el-date-editor.is-error {
  .el-input__inner {
    border-color: #ff4d4f;
    
    &:focus {
      border-color: #ff4d4f;
      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner {
    width: 260px;
  }
  
  .el-picker-panel {
    width: 320px !important;
  }
}

// 自定义时间选择器主题类
.dark-theme-datepicker {
  @extend .el-date-editor;
  
  // 可以在这里添加额外的自定义样式
}